<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu router      
          :default-active="$route.path"
          background-color="#345"
          text-color="#bbb"
          :style="{height: '100vh'}"
          :collapse="isCollapse"
          class="el-menu-vertical-demo">
          <el-menu-item>
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;畅游山水旅游后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title">
              首页
            </template>
          </el-menu-item>
          <el-submenu index="/home/user">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/user-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <!-- <el-menu-item index="/home/user-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增用户</span>
            </el-menu-item> -->
          </el-submenu>
          <el-submenu index="/home/scenic">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">景点管理</span>
            </template>
            <el-menu-item index="/home/scenicList">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">景点列表</span>
            </el-menu-item>
            <el-menu-item index="/home/scenic-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增景点</span>
            </el-menu-item>
          </el-submenu>
           <el-menu-item index="/home/order-list">
           <i class="el-icon-s-grid"></i>
            <template slot="title">
              <span slot="title">订单管理</span>
            </template>
          </el-menu-item>
          
          <el-menu-item index="/home/discussList">
            <i class="el-icon-s-comment"></i>
            <template slot="title">
              评论管理
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>

          <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item v-for="item in $route.meta.nav" :key="item">
              {{item}}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <span v-if="admin">欢迎: {{admin.name}}</span>
          <span v-else @click="login" style="cursor: pointer;">未登录</span>
          <el-dropdown>
            <span><i class="el-icon-caret-bottom" style="margin-top:5px"></i></span> 
            <el-dropdown-menu @click.native="exit" style="padding:5px;cursor: pointer;">退出</el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <!-- 二级路由 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isCollapse: false,
      admin: ''
    }
  },
  mounted() {
    this.admin = JSON.parse(localStorage.getItem('admin') ) 
    console.log('admin:',this.admin.name);
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    exit() {
      console.log('退出登录');
      localStorage.removeItem('admin')
      localStorage.removeItem('cyssToken')
      this.$router.push('/login')
    }
  },
  
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
  .breadcrumb{
    margin-left: 20px;
    flex: 1;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
</style>

